<!DOCTYPE html>
<html lang="en"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>文章内容</title>
  <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="../res/css/main.css">
<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
  <style>
    .userLabel{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-left: 30px
    }
  </style>
</head>
<body>
<div class="header" style="margin-bottom: 40px">
  <div class="menu-btn">
    <div class="menu"></div>
  </div>
  <h1 class="logo">
    <a href="index.html">
      <span>MYBLOG</span>
      <img src="../res/img/logo.png" style="width: 120px;height: 80px">
    </a>
  </h1>
  <div class="nav">
    <a href="/toIndex.action" >文章</a>
    <a href="/toMyBlog.action">我的博客</a>
    <a href="/toWrite.action">写博客</a>
    <a href="/toAlbum.action">相册</a>
    <a href="/toAbout.action">个人空间</a>
    <input form="searchForm" type="text" name="searchKey" placeholder="  搜索博客"  style="border-radius: 4px
      ;padding: 3px 0px;font-family: Microsoft YaHei UI;border-style: solid;border-color: forestgreen;">
    <button class="layui-btn" onclick="search()"><i class="layui-icon">&#xe615;</i>搜索</button>
    <label th:if="${session.loginUser != null}">
      <img class="userLabel" th:if="${session.loginUser.sex == 'female'}"src="../res/img/label/girl.png" >
      <img class="userLabel" th:if="${session.loginUser.sex == 'male'}"src="../res/img/label/boy.png" >
      <a href="/toAbout.action" style="color: forestgreen;margin-left: 5px;" th:text="'欢迎您,'+${session.loginUser.name}"></a>
    </label>
  </div>
  <form id="searchForm" action="/searchEssayByTitle.action"></form>
  <ul class="layui-nav header-down-nav">
    <li class="layui-nav-item"><a href="/toIndex.action" >所有文章</a></li>
    <li class="layui-nav-item"><a href="/toMyBlog.action">我的博客</a></li>
    <li class="layui-nav-item"><a href="/toWrite.action">写博客</a></li>
    <li class="layui-nav-item"><a href="/toAlbum.action">相册</a></li>
    <li class="layui-nav-item"><a href="/toAbout.action">个人空间</a></li>
    <li class="layui-nav-item" th:if="${session.loginUser == null}"><a href="toLogin">登录</a></li>
    <li class="layui-nav-item" th:if="${session.loginUser != null}"><a href="toLogout">注销</a></li>
  </ul>
  <div th:if="${session.loginUser == null}">
    <p  class="welcome-text">
      <a href="toLogin" class="layui-btn">登录</a>
    </p>
  </div>
  <div th:if="${session.loginUser != null}">
    <p  class="welcome-text">
      <a href="toLogout" class="layui-btn">注销</a>
    </p>
  </div>
</div>

  <div class="content whisper-content leacots-content details-content">
    <div class="cont w1000">
      <div class="whisper-list">
        <div class="item-box">
          <div class="review-version">
              <div class="form-box">
                <div class="article-cont">
                  <div class="title">
                    <h3 th:text="${session.essayBySearchNumber.title}" style="margin-bottom: 10px"></h3>
                    <h4 th:text="${session.essayBySearchNumber.userName}" style="font-size: 120%;margin-top: 8px"></h4>
                    <p class="cont-info">
                      <span class="data" th:text="${session.essayBySearchNumber.publishTime}"></span>
                      <span class="types" th:text="${session.essayBySearchNumber.tag}"></span></p>
                  </div>
                  <pre class="text-cont" th:text="${session.essayBySearchNumber.content}"></pre>
                  <pre th:if="${session.essayBySearchNumber.code!=null}" class="layui-code" lay-about="false" th:text="${session.essayBySearchNumber.code}"></pre>
                  <img th:src="@{${session.essayBySearchNumber.imgUrl}}" >
                  <!--<div class="btn-box">
                    <button class="layui-btn layui-btn-primary">上一篇</button>
                    <button class="layui-btn layui-btn-primary">下一篇</button>
                  </div>-->
                </div>
                <!--<div class="form">
                  <form class="layui-form" action="">
                    <div class="layui-form-item layui-form-text">
                      <div class="layui-input-block">
                        <textarea name="desc" placeholder="既然来了，就说几句" class="layui-textarea"></textarea>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-input-block" style="text-align: right;">
                        <button class="layui-btn definite">確定</button>
                      </div>
                    </div>
                  </form>
                </div>-->
                <div class="form">
                  <!--<img src="../res/img/header2.png">-->
                  <form class="layui-form" action="addComment.action" id="commentForm" method="post">
                    <!--隐藏表单提交相关数据-->
                    <input type="hidden" name="essayId" th:value="${session.essayBySearchNumber.id}">
                    <input th:if="${session.loginUser} != null" type="hidden" name="userId" th:value="${session.loginUser.id}">
                    <input type="hidden" name="comment" id="input">
                    <div class="layui-form-item layui-form-text">
                      <div class="layui-input-block">
                        <textarea class="layui-textarea" id="content" placeholder="来评论一下吧!"></textarea>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-input-block" style="text-align: right;">
                        <!--<input class="layui-btn definite">確定</input>-->
                        <button lay-submit="" lay-filter="formDemo" class="layui-btn " onclick="aa()">確定</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <div class="volume">
                全部留言 <span>10</span>
              </div>
            <div class="list-cont" th:each="comment:${session.commentList}">
              <div class="cont">
                <div class="img">
                  <img src="../res/img/header.png" alt="">
                </div>
                <div class="text">
                  <p class="tit"><span class="name" th:text="${comment.username}"></span><span class="data" th:text="${comment.publishTime}"></span></p>
                  <p class="ct" th:text="${comment.content}"></p>
                  <!--<form class="layui-form" method="post">
                      <input type="hidden" th:value="${comment.id}" name="commentId">
                      <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="formDelete" style="float: right"><i class="layui-icon">&#xe640;</i></button>
                  </form>-->
                  <!--<button class="layui-btn layui-btn-sm" style="float: right"><i class="layui-icon">&#xe640;</i></button>-->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--<div id="demo" style="text-align: center;"></div>-->
    </div>
  </div>
  <script type="text/html" id="laytplCont">
    <div class="cont">
      <div class="img">
        {{#  if(d.avatar){ }}
        <img src="{{d.avatar}}" alt="">
        {{#  } else { }}
        <img src="../res/img/header.png" alt="">
        {{# } }}
      </div>
      <div class="text">
        <p class="tit"><span class="name">{{d.name}}</span><span class="data">2018/06/06</span></p>
        <p class="ct">{{d.cont}}</p>
      </div>
    </div>
  </script>
  <div class="footer-wrap">
    <div class="footer w1000">
      <div class="qrcode">
        <img src="../res/img/erweima.jpg">
      </div>
      <div class="practice-mode">
        <img src="../res/img/down_img.jpg">
        <div class="text">
          <h4 class="title">我的联系方式</h4>
          <p>微信<span class="WeChat">15521306790</span></p>
          <p>手机<span class="iphone">15521306790</span></p>
          <p>邮箱<span class="email">1115051923@qq.com</span></p>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="../res/layui/layui.js"></script>
  <script type="text/javascript">
  layui.config({
    base: '../res/js/util/'
  }).use(['element','laypage','form','menu'],function(){
    element = layui.element,laypage = layui.laypage,menu = layui.menu;
    laypage.render({
      elem: 'demo'
      ,count: 70 //数据总数，从服务端得到
    });
    $=layui.jquery;
    var form = layui.form;
    form.on('submit(formDemo)', function(data){
      $.ajax({
        url:'/addComment.action',
        method:'post',
        data:data.field,
        dataType:'JSON',
        success:function(res){
          var layer = layui.layer;
          layer.msg(res.msg, {
            time: 1000, //1s后自动关闭
            icon: 1
          });
        },
        error:function (data) {

        }
      });
      return false;
    });

    form.on('submit(formDelete)', function(data){
      $.ajax({
        url:'/deleteComment.action',
        method:'post',
        data:data.field,
        dataType:'JSON',
        success:function(res){
          var layer = layui.layer;
          layer.msg(res.msg, {
            time: 2000, //1s后自动关闭
            icon: 1
          });
        },
        error:function (data) {

        }
      });
      return false;
    });
    menu.init();
    menu.off();
    menu.submit()
  });

  layui.use('code', function(){ //加载code模块
    layui.code({
      title: 'Java',
    }); //引用code方法
  });
</script>

  <script>
  function search() {
    document.getElementById("searchForm").submit();//js原生方式表单提交
  }
  function aa() {
    var content = document.getElementById("content").value;
    $("#input").val(content);
    /*document.getElementById("commentForm").submit();//js原生方式表单提交*/
  }
</script>
</body>
</html>